* {
    margin: 0;
    padding: 0;
}

:root {
    --headheight: 50px;
    --fristsection: 48px;
    --pngbox: 170px;
    --throbw: 50px;
}

::-webkit-scrollbar {
    width: 0px;
    /* background-color:#F5F5F5;
    transition: 1s; */
}

/* ::-webkit-scrollbar-track
{
    background-color:#F5F5F5;
}
::-webkit-scrollbar-thumb
{
    border-radius:20px;
    background-color:#000000;
} */
body {
    overflow: hidden;
    background: white;
    transition: 1s all;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    width: 100%;
}

.block {
    position: relative;
    width: var(--headheight);
    height: calc(var(--headheight)*0.18);
    background: black;
    margin: 3.5px;
    top: calc(var(--headheight)*0.2*0.5);
    /* transform: rotateZ(100deg) translate(-10deg,0); */
    transition: 1s;
}

.bk1 .block:nth-child(1) {
    background: white;
    transform: translate(0px, 13px) rotateZ(45deg);
}

.bk1 .block:nth-child(2) {
    background: transparent;
}

.bk1 .block:nth-child(3) {
    background: white;
    transform: translate(0px, -13px) rotateZ(-45deg);
}

nav {
    display: flex;
    position: fixed;
    top: 0;
    z-index: 1000;
    justify-content: space-between;
    background: white;
    width: 100%;
    transition: 1s;
}

.hleft {
    margin: 0 20px;
    padding: 10px;
    height: var(--headheight);
    transition: 1s;

}

.hleft img {
    height: 100%;
    border-radius: 30px;
}

.hright {
    margin: 0 20px;
    display: flex;
    height: var(--headheight);
    padding: 10px;

}

.hright a {
    height: var(--headheight);
    text-align: center;
    line-height: var(--headheight);
    margin: 0 10px;
}

#fristsection {
    position: relative;
    width: 100%;
    height: 100vh;
}

.centerbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    height: 150px;
    padding: 30px;
    backdrop-filter: blur(25px);
    /* box-shadow: 0px 0px 20px 20px rgb(91, 90, 90); */
    border-radius: 30px;
}

.centerbox h1 {
    line-height: 150px;
    text-align: center;
    font-size: calc(var(--fristsection)*2);
    /* -webkit-text-stroke: 1px white; */
    color: black;

}

.bgtext {
    width: 100%;
    overflow: hidden;
}

.textline {
    transform: translate(calc(var(--td)*-100));
    display: flex;
    /* transition: 1s; */
}

.textline:nth-child(2n) {
    animation: textline1 2s linear;
}

.textline:nth-child(2n-1) {
    animation: textline2 2s linear;
}

@keyframes textline1 {
    0% {
        transform: translate(calc(var(--td)*-2000));
    }

    50% {
        transform: translate(calc(var(--td)*-100));

    }
}

@keyframes textline2 {
    0% {
        transform: translate(calc(var(--td)*2000));
    }

    50% {
        transform: translate(calc(var(--td)*-100));

    }
}

.textline p {
    cursor: default;
    color: black;
    font-size: calc(var(--fristsection)*2);
    margin: 0 10px;
    animation: 1s infinite anim;
}

#secondsection {
    /* width: 100%; */
    /* height: 500px; */
    background-image: url(../images/1.jpg    );
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    height: 300px;
    margin: 20px 0;
    filter: grayscale(0);
    transition: 2s;
    /* border-top: solid black 15px; */
    /* border-bottom: solid black 15px; */
}

#secondsection p {
    font-size: calc(var(--fristsection)/1.5);
    color: white;
    font-weight: bold;
}

.bg {
    /* background-color: rgba(255, 255, 255, 0.3); */
    border-radius: 5px;
    text-align: center;
    /* backdrop-filter: blur(10px); */
    padding: 20px 40px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    display: flex;
    border-radius: 20px;
}

ul {
    list-style-type: none;
}

#thirdsection h1,
#fourthsection h1 {
    width: 100%;
    height: auto;

    font-size: calc(var(--fristsection));
    /* background: yellow; */
    text-align: center;
    border-top: 10px solid black;
    border-bottom: 10px solid black;
}

.tflex {
    display: flex;
    margin: 20px 0;

}

.tleft,
.tright,
.tcenter {
    /* overflow: hidden; */
    width: 50%;
    max-height: 2000px;
    /* height: 700px; */
    /* margin: 10px; */
    padding: 10px;
    position: relative;
}

.imgbox {
    /* margin: 30px; */
    width: 50%;
    border: 10px solid white;
    overflow: hidden;
    margin: 30px;
    box-shadow: 0px 0 35px 1px #00000085;
    position: relative;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%) rotateZ(calc(var(--it)*-10deg));
    border-radius: 20px;
    transition: 1s;
}

.hidebox {
    width: 100%;
    height: 0;
    /* overflow: hidden; */
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    bottom: 0;
    font-size: calc(var(--fristsection)*0.9);
    font-weight: 500;
    font-style: oblique;
    transition: 1s;
}

/* .imgbox:hover .hidebox::before {
    height: 100px;
} */
.imgbox:hover .hidebox {
    height: calc(var(--fristsection)*1.3);
}

/* .imgbox:hover{
    transform: translate(-50%,-50%);

} */
#fourthsection {
    display: flex;
}

.fflex {
    /* position: absolute; */
    display: flex;
    width: 200%;
    height: 200px;
    padding: 10px;
    position: relative;
    overflow: hidden;

}

.pngbox {
    width: 150px;
    height: 150px;
    padding: 10px;
    margin: 10px;
    border-radius: 30px;
    animation: pngboxanim 12s infinite;
    animation-timing-function: linear;
    animation-delay: var(--del);
    position: absolute;
    /* left: calc(var(--pngbox)*-4.5); */
    /* left: calc(var(--pngbox)*8); */
    right: calc(var(--pngbox)*-1.5);
    transition: 5s;
    background: #000;

}

.pngbox:nth-child(1) {
    background: url(../images/dw.png) no-repeat center center;
    background-size: cover;

}

.pngbox:nth-child(2) {
    background: url(../images/ps.png) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(3) {
    background: url(../images/postman.svg) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(4) {
    background: url(../images/vsc.png) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(5) {
    background: url(../images/java.jpeg) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(6) {
    background: url(../images/git.jpeg) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(7) {
    background: url(../images/gitee.png) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(8) {
    background: url(../images/python.jpeg) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(9) {
    background: url(../images/idea.svg) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(10) {
    background: url(../images/toolbox.svg) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(11) {
    background: url(../images/pycharm.svg) no-repeat center center;
    background-size: cover;
}

.pngbox:nth-child(12) {
    background: url(../images/hbu.png) no-repeat center center;
    background-size: cover;
}

@keyframes pngboxanim {
    0% {

        right: calc(var(--pngbox)*-1.5);

        /* left: calc(var(--pngbox)*8); */
    }

    /* 10%{
        position: relative;
        left: calc(var(--pngbox)*-2);
    }
    20%{
        position: relative;
        left: calc(var(--pngbox)*-3);
    }
    30%{
        position: relative;
        left: calc(var(--pngbox)*-4);
    }
    40%{
        position: relative;
        left: calc(var(--pngbox)*-5);
    }
    50%{
        position: relative;
        left: calc(var(--pngbox)*-6);
    }
    60%{
        position: relative;
        left: calc(var(--pngbox)*-7);
    }
    70%{
        position: relative;
        left: calc(var(--pngbox)*-8);
    } */
    100% {
        right: calc(var(--pngbox)*12);

    }
}

.hidbox {
    /* display: none; */
    display: block;
    background: black;
    position: fixed;
    width: 100vw;
    transition: 1s;
    height: 100vh;
    right: 0;
    top: 70px;
}

.container {
    width: calc(var(--throbw) * 4);
    height: calc(var(--throbw) * 4);
    padding: var(--throbw);
    border-radius: calc(var(--throbw) /2);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    box-shadow: 0px 0px 20px 20px rgba(104, 112, 118, 0.2);
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000000;

}

.square {
    width: var(--throbw);
    height: var(--throbw);
    border: 1px solid red;
    background: rgba(207, 52, 40);
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(var(--throbw));
    box-shadow: calc(var(--throbw)* 3) calc(var(--throbw)* 3) 15px rgb(255 0 0 / 13%);
    animation: beating 1s infinite;
    animation-delay: calc(var(--d) *0.05s);
}

@keyframes beating {
    50% {
        transform: translateZ(calc(var(--throbw) /2));
    }

}

.square::before {
    content: "";
    position: absolute;
    width: var(--throbw);
    height: var(--throbw);
    top: 0;
    left: 0;
    background: rgb(225 83 83);
    transform: rotateY(-90deg);
    transform-origin: right center;
}

.square::after {
    content: "";
    position: absolute;
    width: var(--throbw);
    height: var(--throbw);
    top: 0;
    left: 0;
    background: rgb(225 83 83);
    filter: brightness(2.1);
    transform: rotateX(90deg);
    transform-origin: right bottom;

}

.square:hover {
    cursor: pointer;
    filter: brightness(2.1);
    animation-play-state: paused;
}

.hidbox span {
    display: block;
    transition: 1s;
    overflow: hidden;
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 14px #ffffff;
}